// 拍摄统计页面：新增/编辑弹窗

import React from "react";
import {Button, Col, DatePicker, Form, message, Modal, Row} from "antd";
import {
    ButtonLock, InputText,
    // MyDatePicker,
    SelectAccount,
    SelectPerson,
} from "../../components/BaseComponent/forms";
import {zbApi} from "../../services/basic";
import moment from "moment";

class AddOrEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            title: "直播-详情"
        }
    }

    dataFormLabel = {}

    showModal = (handler, record) => {
        let title = "直播-详情";
        if (handler === "view") {
            title = "直播-详情";
        } else if (handler === "update") {
            title = "直播-编辑";
        } else if (handler === "create") {
            title = "直播-新增";
        }

        if (this.form) this.form.resetFields();
        this.id = null;
        this.setState({
            handler,
            title,
            visible: true
        }, () => {
            this.dateInit();

            if (["view", "update"].includes(handler)) {
                zbApi.selectById(record.id).then(res => {
                    const {ry, kbsj, jssj, rq, zbzh, zbxm} = res.data;
                    this.id = record.id;
                    this.form.setFieldsValue({
                        ry, zbzh, zbxm,
                        rq: rq ? moment(rq, "YYYY-MM-DD") : null,
                        kbsj: moment(kbsj, "YYYY-MM-DD HH:mm:ss"),
                        jssj: moment(jssj, "YYYY-MM-DD HH:mm:ss"),
                    });
                })
            }
        })
    }

    handleOk = () => {
        const api = this.state.handler === "create" ? zbApi.createPs : zbApi.updatePs;
        return new Promise((resolve, reject) => {
            this.form.validateFields().then(data => {
                api({
                    ...data,
                    id: this.id,
                    rq: moment(data.rq).format("YYYY-MM-DD"),
                    kbsj: moment(data.kbsj).format("YYYY-MM-DD HH:mm:ss"),
                    jssj: moment(data.jssj).format("YYYY-MM-DD HH:mm:ss"),
                    zbzhmc: this.dataFormLabel.zbzh,
                    ryxm: this.dataFormLabel.ry,
                }).then(res => {
                    if (res.code !== "1") {
                        reject();
                        return
                    }
                    message.success('操作成功');
                    this.props.editItemDone();// 刷新
                    this.setState({
                        visible: false
                    }, () => {
                        resolve();
                    })
                }).catch(() => reject())
            }).catch(e => {
                // 表单校验失败
                console.log(e.errorFields)
                reject();
            })
        })

    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    dateInit = () => {
        const today = moment(new Date(), "YYYY-MM-DD");
        if (this.form) this.form.setFieldsValue({
            rq: today
        })
    }

    onFormChange = (data, e) => {
        const key = Object.keys(data)[0];
        const label = e ? e.children : null;
        this.dataFormLabel = {
            ...this.dataFormLabel,
            [key]: label
        }
    }

    render() {
        const rules = [{required: true, message: "此为必填项"}];
        return (<Modal
            title={this.state.title}
            visible={this.state.visible}
            // onOk={this.handleOk}
            onCancel={this.handleCancel}
            maskClosable={false}
            footer={this.state.handler === "view" ? null : [
                <Button onClick={this.handleCancel}>取消</Button>,
                <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
            ]}
        >
            <Form ref={form => this.form = form}>
                <Row>
                    <SelectAccount
                        colSpan={24}
                        rules={rules}
                        label="直播账号"
                        onFormChange={this.onFormChange}
                        keyword="zbzh"
                        key="zbzh"></SelectAccount>
                    <InputText label="直播项目" keyword="zbxm" colSpan={24} rules={rules}></InputText>
                    <SelectPerson
                        colSpan={24}
                        label="人员"
                        keyword="ry"
                        onFormChange={this.onFormChange}
                        rules={rules}
                        key="ry"></SelectPerson>
                    <Col span={24}>
                        <Form.Item
                            label="开播时间"
                            name="kbsj"
                            className="Item"
                            rules={rules}>
                            <DatePicker
                                valueFormat="YYYY-MM-DD HH:mm:ss"
                                format="YYYY-MM-DD HH:mm:ss"
                                style={{width: "100%"}}
                                showTime
                            ></DatePicker>
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <Form.Item label="结束时间" name="jssj" className="Item" rules={rules}>
                            <DatePicker
                                valueFormat="YYYY-MM-DD HH:mm:ss"
                                format="YYYY-MM-DD HH:mm:ss"
                                style={{width: "100%"}}
                                showTime
                            ></DatePicker>
                        </Form.Item>
                    </Col>
                    <Col span={24}>
                        <Form.Item
                            label="选择日期"
                            name="rq"
                            className="Item"
                            rules={rules}>
                            <DatePicker
                                valueFormat="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                style={{width: "100%"}}
                                showTime
                            ></DatePicker>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>)
    }
}

export default AddOrEdit;